<template>
	<div class="head-container">
		<!-- <div class="head-container-header">
			<div class="head-container-header-input">
				<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable
					@change="getdeptTree" />
			</div>
			<div class="head-container-header-dropdown" v-if="showExpand">
				<el-dropdown :hide-on-click="false">
					<el-icon style="transform: rotate(90deg)">
						<MoreFilled />
					</el-icon>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>

								<el-button :class="buttonClass" link type="primary" :icon="isExpand ? 'expand' : 'fold'"
									@click="toggleRowExpansionAll(isExpand ? false : true)">
									{{ isExpand ? '折叠' : '展开' }}
								</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
</el-dropdown>
</div>
</div> -->
		<el-tree class="mt20" :data="state.List" :props="props.props" :expand-on-click-node="false" ref="deptTreeRef"
			:loading="state.localLoading" node-key="id" highlight-current :default-expand-all="false"
			@node-click="handleNodeClick" :default-expanded-keys='state.List[0] && [state.List[0].id]'>
			<template #default="{ node, data }" v-if="$slots.default">
				<slot :node="node" :data="data"></slot>
			</template>
		</el-tree>
	</div>
</template>

<script setup lang="ts" name="query-tree">
import { useMessage } from '/@/hooks/message';
const emit = defineEmits(['search', 'nodeClick']);

const props = defineProps({
	/**
	 * 树结构属性配置。
	 *
	 * @default { label: 'name', children: 'children', value: 'id' }
	 */
	props: {
		type: Object,
		default: () => {
			return {
				label: 'name',
				children: 'children',
				value: 'id',
			};
		},
	},

	/**
	 * 输入框占位符。
	 *
	 * @default ''
	 */
	placeholder: {
		type: String,
		default: '',
	},


	/**
	 * 是否显示加载中状态。
	 *
	 * @default false
	 */
	loading: {
		type: Boolean,
		default: false,
	},

	/**
	 * 查询函数，必须返回 Promise 类型数据。
	 */
	query: {
		type: Function,
		required: true,
	},

	/**
	 * 是否显示折叠控制
	 */
	showExpand: {
		type: Boolean,
		default: false,
	},
});

const state = reactive({
	List: [], // 树形结构列表数据
	localLoading: props.loading, // 是否加载中
});

const deptTreeRef = ref(); // 部门树形结构组件实例引用
const searchName = ref(); // 查询关键字
const isExpand = ref(false); // 是否展开所有节点

const buttonClass = computed(() => {
	return ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary'];
});

/**
 * 点击树形结构节点触发的事件。
 *
 * @param item 被点击的节点数据。
 */
const handleNodeClick = (item: any) => {
	emit('nodeClick', item);
};

/**
 * 获取部门树形结构数据。
 */
const getdeptTree = () => {
	if (props.query instanceof Function) {
		state.localLoading = true;
		console.log('searchName', searchName);

		// 调用传入的查询函数，并将查询关键字作为参数传入
		const result = props.query(unref(searchName));
		console.log('result', typeof result);
		// 如果查询结果为 Promise 类型，则进行后续处理
		if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
			result
				.then((r: any) => {
					state.List = r.data;
				})
				.catch((err) => {
					useMessage().error(err.msg);
				});
		}
	}
};

const getDepartmentList = async (data) => {
	console.log('传入数据data', data);
	// console.log('searchName------', searchName.value);

	for (const key in data) {
		console.log('判断id是否相等', data[key].id == '1001A11000000000131I');

		if (data[key].id == '1001A11000000000131I1') {
			console.log('相等时return', data[key]);

			return data[key]
		} else {
			console.log('判断是否有children', data[key].children != undefined);
			console.log('children值', data[key].children);

			if (data[key].children != undefined) {
				getDepartmentList(data[key].children)
			} else {
				return '111'
			}
		}
	}
}

/**
 * 切换所有节点的展开/收起状态。
 *
 * @param status 目标状态，true 为展开，false 为收起。
 */
const toggleRowExpansionAll = (status) => {
	console.log('status', status);

	isExpand.value = status;
	const nodes = deptTreeRef.value.store._getAllNodes();
	for (let i = 0; i < nodes.length; i++) {
		nodes[i].expanded = status;
	}
};

onMounted(() => {
	getdeptTree();
});

// 方便父组件调用刷新树方法
defineExpose({
	getdeptTree,
});
</script>
<style lang="scss" scoped>
.head-container {
	&-header {
		display: flex;
		align-items: center;

		&-input {
			width: 90%;
		}

		&-dropdown {
			flex: 1;
			margin-left: 5%;
		}
	}
}
</style>
